<template>
  <div>
    <el-card>
      请根据单词写出对应的假名
      <h1>
        {{ selectedWord.word }}
      </h1>
      <el-form>
        <el-form-item label="在此输入假名">
          <el-input v-model="inputKana" ref="input"></el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="check">检查</el-button>
    </el-card>

    <!-- 检查错误的提示 -->
    <el-dialog :visible.sync="wrongVisible" @close="handleWrongClose" title="回答错误！">
      <div>
        回答错误！该单词是{{ selectedWord.word }},{{ selectedWord.kana }},{{ selectedWord.chinese }}
      </div>
    </el-dialog>

    <!-- 检查正确的提示 -->
    <el-dialog :visible.sync="rightVisible" @close="handleRightClose" :destroy-on-close="dBoolean" title="回答正确！">
      <div>
        该单词是
        <h1>
          {{ selectedWord.word }},{{ selectedWord.kana }},{{ selectedWord.chinese }}
        </h1>
      </div>
    </el-dialog>

  </div>

</template>

<script>
export default {
  data() {
    return {
      selectedWord: {},
      selectIndex: 1,
      totalCount: 0,
      inputKana: '',
      wrongVisible: false,
      rightVisible: false,
      dBoolean: true,
    };
  },

  methods: {
    check() {
      if (this.inputKana === this.selectedWord.kana) {
        this.handleRight();
      } else {
        this.handleWrong();
      }
    },

    handleWrong() {
      console.log("wrong");
      this.wrongVisible = true;
      this.inputKana = '';
      this.selectedWord.checkCount += 1;
      this.$API.word.updateWord(this.selectedWord);
    },

    handleRight() {
      console.log("right");
      this.rightVisible = true;
      this.selectedWord.checkCount += 1;
      this.selectedWord.rightCount += 1;
      this.$API.word.updateWord(this.selectedWord);
    },

    handleRightClose() {
      this.inputKana = '';
      let num = this.selectIndex + 1;
      if (num > this.totalCount) {
        num = 1;
      }
      this.selectIndex = num;
      this.updateSelectedWord();
      this.$refs.input.focus();
    },

    handleWrongClose() {
      this.$refs.input.focus();
    },

    async updateSelectedWord() {
      var data = {
        userId: window.localStorage.getItem('userId'),
        currentPage: this.selectIndex,
        pageSize: 1,
      }
      let res = await this.$API.word.getWordList(data);
      if (res.code === 200) {
        this.selectedWord = res.data.list[0];
      } else {

      }
    },
  },

  mounted() {
    this.selectedWord = this.$route.query.selectedWord;
    this.selectIndex = this.$route.query.selectIndex;
    this.totalCount = this.$route.query.totalCount;
    this.$refs.input.focus();
  },

}
</script>

<style>

</style>